<template>
	<div>
		<div>
			<el-card>
				<el-form class="searchForm" size="mini" label-width="100px">
					<el-form-item label="任务名称">
						<el-input
							style="width: 200px"
							v-model="searchData.jobName"
							placeholder="请输入用户名称"
						></el-input>
					</el-form-item>
					<el-form-item label="任务开始时间">
						<el-date-picker
							v-model="times"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>

					<div class="searchBtn">
						<el-button type="primary" size="small"><i class="el-icon-search"></i> 搜索</el-button>
						<el-button type="info" size="small"><i class="el-icon-delete"></i> 清空</el-button>
					</div>
				</el-form>
				<el-button class="btn" type="primary" size="small" @click="addDialogVisible = true"
					><i class="el-icon-plus"></i> 新增任务</el-button
				>
				<div>
					<el-table
						:data="jobData"
						height="450"
						border
						style="width: 100%"
						:cell-style="{ 'text-align': 'center' }"
						:header-cell-style="{ 'text-align': 'center' }"
					>
						<el-table-column type="index" label="编号" width="50"></el-table-column>
						<el-table-column prop="jobName" label="任务名称"></el-table-column>
						<el-table-column prop="jobGroup" label="任务组名"></el-table-column>
						<el-table-column prop="jobType" label="任务类型"></el-table-column>
						<el-table-column prop="jobFile" label="bean名称"></el-table-column>
						<el-table-column prop="jobMethod" label="执行方法" width="220"></el-table-column>
						<el-table-column prop="jobParms" label="执行参数" width="220"></el-table-column>
						<el-table-column prop="jobCron" label="cron表达式" width="100"></el-table-column>
						<el-table-column prop="jobStatus" label="状态" width="100">
							<template slot-scope="scope">
								<el-tag>{{ scope.row.jobStatus == 0 ? "运行中" : "停止" }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="remarks" label="备注" width="220"></el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-dropdown trigger="click">
									<el-button class="el-dropdown-link"
										>操作<i class="el-icon-arrow-down el-icon--right"></i
									></el-button>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click.native="startJob(scope.row)">启动</el-dropdown-item>
										<el-dropdown-item @click.native="stopJob(scope.row)">停止</el-dropdown-item>
										<el-dropdown-item @click.native="editJobOpen(scope.row)">编辑</el-dropdown-item>
										<el-dropdown-item @click.native="deleteJob(scope.row)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						:total="pagingData.total"
						background
						layout="total,sizes, prev, pager, next"
						:page-size="pagingData.size"
						:page-sizes="[1, 5, 10, 20, 30, 50]"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagingData.current"
					></el-pagination>
					<el-dialog
						title="新增任务"
						:before-close="handleClose"
						:visible.sync="addDialogVisible"
						width="50%"
					>
						<el-form :model="jobForm" label-position="left" label-width="100px" size="small">
							<el-form-item label="任务名称">
								<el-input v-model="jobForm.jobName"></el-input>
							</el-form-item>
							<el-form-item label="任务组名">
								<el-input v-model="jobForm.jobGroup"></el-input>
							</el-form-item>
							<el-form-item label="任务类型">
								<el-select v-model="jobForm.jobType" placeholder="请选择">
									<el-option value="bean类型"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="cron表达式">
								<el-input v-model="jobForm.jobCron"></el-input>
							</el-form-item>
							<el-form-item label="bean名称">
								<el-input v-model="jobForm.jobFile"></el-input>
							</el-form-item>
							<el-form-item label="执行方法">
								<el-input v-model="jobForm.jobMethod"></el-input>
							</el-form-item>
							<el-form-item label="执行参数">
								<el-input v-model="jobForm.jobParms"></el-input>
							</el-form-item>

							<el-form-item label="备注">
								<el-input v-model="jobForm.remarks"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click=";(addDialogVisible = false), init()">取 消</el-button>
							<el-button size="mini" type="primary" @click="addJob">确 定</el-button>
						</span>
					</el-dialog>
					<el-dialog
						title="编辑任务"
						:before-close="handleClose"
						:visible.sync="editDialogVisible"
						width="50%"
					>
						<el-form :model="jobForm" label-position="left" label-width="100px" size="small">
							<el-form-item label="任务名称">
								<el-input v-model="jobForm.jobName"></el-input>
							</el-form-item>
							<el-form-item label="任务组名">
								<el-input v-model="jobForm.jobGroup"></el-input>
							</el-form-item>
							<el-form-item label="任务类型">
								<el-select v-model="jobForm.jobType" placeholder="请选择">
									<el-option value="bean类型"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="bean名称">
								<el-input v-model="jobForm.jobFile"></el-input>
							</el-form-item>
							<el-form-item label="执行方法">
								<el-input v-model="jobForm.jobMethod"></el-input>
							</el-form-item>
							<el-form-item label="备注">
								<el-input v-model="jobForm.remarks"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click=";(editDialogVisible = false), init()">取 消</el-button>
							<el-button size="mini" type="primary" @click="editJob">确 定</el-button>
						</span>
					</el-dialog>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { deletejob, pageJob, saveJob, startJob, stopJob, updateJob } from "../../api/admin/job"

export default {
	name: "job",
	data() {
		return {
			times: "",
			pagingData: {
				current: 1,
				size: 20,
				total: 0,
			},
			searchData: {
				jobName: "",
				startDate: "",
				endDate: "",
			},
			roleOptions: [],
			jobData: [],
			importDialogVisible: false,
			addDialogVisible: false,
			editDialogVisible: false,
			fileUploadUrl: "",
			fileList: [],
			jobForm: {
				id: "",
				jobName: "",
				jobGroup: "",
				jobFile: "",
				jobCron: "",
				jobParms: "",
				jobMethod: "",
				jobType: "",
				jobStatus: "",
				remarks: "",
			},
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			let search = {
				...this.searchData,
				// total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			pageJob(search).then((res) => {
				this.jobData = res.data.data.records
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
			})
		},
		addJob() {
			saveJob(this.jobForm).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("添加用户成功")
					this.addDialogVisible = false
					this.init()
				} else {
					this.$message.error("添加用户失败")
					this.addDialogVisible = false
				}
			})
			this.jobForm = {}
		},
		editJobOpen(row) {
			this.editDialogVisible = true
			this.jobForm = row
		},
		editJob() {
			updateJob(this.jobForm).then((res) => {
				if (res.data.code == "200") {
					this.editDialogVisible = false
					this.$message.success("修改任务成功")
					this.init()
				} else {
					this.editDialogVisible = false
					this.$message.success("修改任务失败")
				}
			})
		},
		deleteJob(row) {
			this.$confirm("确定要删除该任务？", "警告", {
				distinguishCancelAndClose: true,
				confirmButtonText: "确定",
				cancelButtonText: "取消",
			})
				.then(() => {
					deletejob(row.id).then((res) => {
						if (res.data.code == "200") {
							this.$message.success("删除任务成功")
							this.init()
							return
						}
						this.$message.success("删除任务失败")
						return
					})
				})
				.catch((action) => {})
		},
		startJob(row) {
			startJob(row).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("任务启动成功")
				}
				this.init()
			})
		},
		stopJob(row) {
			stopJob(row).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("任务停止成功")
				}
				this.init()
			})
		},
		// 页码切换
		handleSizeChange(val) {
			this.pagingData.size = val
			this.init()
		},
		// 当前页切换
		handleCurrentChange(val) {
			this.pagingData.current = val
			this.init()
		},
		/**
		 * 关闭编辑表单框
		 */
		handleClose(done) {
			this.init()
			done()
		},
	},
}
</script>

<style scoped lang="scss">
@import "~@/style/admin/job.scss";
@import "~@/style/publicPage.scss";
</style>
